<template>
  <div class="PictureModule">
    <el-scrollbar height="500px">
      <el-card
        shadow="never"
        class="box-card Picture-card"
        v-for="(item, index) in pictureData"
        :key="index"
      >
        <template #header>
          <div class="card-header flex justify-between">
            <div>{{ item.image_type_text }}</div>
            <div class="header-handle">
              <el-button class="mr-3" link type="primary" @click="handleEmpty(index)"
                >清空</el-button
              >
              <el-button
                class="mr-3"
                v-if="!(item.image_type == 1 || item.image_type == 4)"
                @click="copyWindowImage(item)"
                >复制橱窗图</el-button
              >
              <el-select
                class="mr-3 !w-[120px]"
                v-if="item.image_type != 4"
                v-model="item.image_source"
                placeholder="图片来源"
                clearable
              >
                <el-option
                  v-for="item in options.imageSourceText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-button
                @click="
                  handleOpen(
                    item.image_type === 4 ? videoRef : nativeRef,
                    item.image_type,
                    item.image_source
                  )
                "
                >本地上传</el-button
              >
              <el-button v-if="item.image_type != 4" @click="handleBatchUpdateType(item)"
                >批量维护类型</el-button
              >
              <el-button v-if="item.image_type != 4" @click="handleImageDownload(item)"
                >图片下载</el-button
              >
            </div>
          </div>
        </template>
        <PictureList
          type="showcase"
          v-model="item.values"
          :imageType="item.image_type"
          :imageSource="item.image_source"
          :isMainPic="isMainPic"
        ></PictureList>
      </el-card>
    </el-scrollbar>
  </div>
  <NativeUpload
    ref="nativeRef"
    @uploadFile="uploadFile"
    :customTag="props.customTag"
  ></NativeUpload>
  <VideoUpload
    ref="videoRef"
    @uploadFile="uploadFile"
    :customTag="props.customTag"
  ></VideoUpload>
  <batchUpdateImagetype
    ref="batchUpdateImagetypeRef"
    :options="options.imageForText"
    @edit="handleBatchUpdateImagetype"
  ></batchUpdateImagetype>
  <BatchImageDownload ref="batchImageDownloadRef"></BatchImageDownload>
</template>

<script setup name="Module">
import { onMounted, reactive } from "vue";
import PictureList from "./List.vue";
import NativeUpload from "./NativeUpload.vue";
import VideoUpload from "./VideoUpload.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import batchUpdateImagetype from "@/components/Dialog/batchUpdateImagetype/index.vue";
import BatchImageDownload from "@/components/Dialog/batchImageDownload/index.vue";

let options = reactive(inject("options"));
let handleType = reactive(inject("handleType"));

const emit = defineEmits(["update:modelValue", "copyImage"]);
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
  customTag: {
    type: String,
    default: () => "",
  },
});

const pictureData = computed({
  get: () => {
    return props.modelValue || [];
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const nativeRef = ref(null);
const videoRef = ref(null);
// 打开弹窗
const handleOpen = (ref, imageType, imageSource) => {
  nextTick(() => {
    ref.open(imageType, imageSource);
  });
};
const handleEmpty = (index) => {
  if (pictureData.value[index].values.length == 0) {
    ElMessage.error("暂无可清空图片");
    return;
  }
  ElMessageBox.confirm("是否清空当前类型的图片?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    if (handleType.value == "edit") {
      pictureData.value[index].values.forEach((i) => {
        i.delete = 1;
      });
    } else {
      pictureData.value[index].values = [];
    }
  });
};

const uploadFile = (fileList, imageType) => {
  pictureData.value.forEach((item) => {
    if (item.image_type === imageType) {
      if (!item.values) item.values = [];
      item.values.push(...fileList);
    }
  });
};
// 复制橱窗图
const copyWindowImage = (item) => {
  emit("copyImage", {
    imageType: item.image_type,
    imageTypeSource: 1,
  });
};

let isMainPic = ref(false);

// 批量维护类型
const batchUpdateImagetypeRef = ref();
const handleBatchUpdateType = (item) => {
  console.log(item);
  if (item.values.length == 0) {
    ElMessage.error("暂无可维护类型的图片,请先上传图片");
    return;
  }
  batchUpdateImagetypeRef.value.open(item);
};

// 图片下载
const batchImageDownloadRef = ref();
const handleImageDownload = (item) => {
  if (item.values.filter((i) => !i.delete).length == 0) {
    ElMessage.error("暂无可下载的图片,请先上传图片");
    return;
  }
  batchImageDownloadRef.value.open(item);
};
</script>

<style lang="scss" scoped>
.Picture-card {
  :deep(.el-card__header) {
    border-bottom: 1px solid var(--el-card-border-color);
  }
}

.w-112 {
  width: 112px;
}
</style>
